@charset "utf-8";

@font-face {
    font-family: FOT -Gospel Std EB;
    src: url("./FOT -Gospel Std EB.ttf");
}

@font-face {
	font-family: FOT -Carat Std UB;
	src: url("./FOT -Carat Std UB.ttf");
}

@media screen and (min-width: 769px) {
	.fullBox {
		position: absolute;
		top: 120px;
		width: 100%;
		padding-bottom: 50px;
	}
	.infoBox {
		position: absolute;
		width: 45%;
		right: 5vw;
	}
}

@media screen and (max-width: 768px) {
	.fullBox {
		position: absolute;
		top: 70px;
		width: 100%;
		padding-bottom: 50px;
	}
	
}

@media screen and (min-width: 769px) {
			.mx-bugs_bunny{
				width: 40%;
				max-width: 700px;
				margin: 30px 40px;
			}
			.mx-bugs_info div{
				width: 100%;
				padding: 0.5vw;
				color: #fff;
				font-size: 1vw;
				text-decoration: none;
			}
			.ZI-slider{
				border: 4px solid #EC5EA4;
				border-radius: 5px;
			}
			.mx-bugs_info{
				position: absolute;
				display: block;
				max-width: 100%;
				bottom: 0px;
				background-color: rgba(236,94,164, 0.6);			
			}
			.mx-navigation {
			    margin: 4px;
			    top: 42%;
			}
			.mx-prev, .mx-next{
				background-color: rgba(0, 0, 0, 0);
			}
			.mx-prev{
				background-image: url(./asset/img/arr_l.png);
				background-repeat: no-repeat;
				background-position: 2px 5px;
			}
			.mx-next{
				background-image: url(./asset/img/arr_r.png);
				background-repeat: no-repeat;
				background-position: 8px 5px;
			}
		.tabBox {
			border: 5px;
		}
}

@media screen and (max-width: 768px) {
			.mx-bugs_bunny{
				width: 90%;
				margin: 10px 4%;				
			}
			.mx-bugs_info div{
				width: 100%;
				padding: 0.5vw;
				color: #fff;
				font-size: 1vw;
				text-decoration: none;
			}
			.ZI-slider{
				border: 4px solid #EC5EA4;
				border-radius: 5px;
			}
			.mx-bugs_info{
				position: absolute;
				display: block;
				max-width: 100%;
				bottom: 0px;
				background-color: rgba(236,94,164, 0.6);			
			}
			.mx-navigation {
			    margin: 4px;
			    top: 42%;
			}
			.mx-prev, .mx-next{
				background-color: rgba(0, 0, 0, 0);
			}
			.mx-prev{
				background-image: url(./asset/img/arr_l.png);
				background-repeat: no-repeat;
				background-position: 2px 5px;
			}
			.mx-next{
				background-image: url(./asset/img/arr_r.png);
				background-repeat: no-repeat;
				background-position: 8px 5px;
			}
		.tabBox {
			border: 5px;
		}
}